<template>
    <div>
      
        <div id="Nav" style="height:60px">
            <span @:mouseenter="fn" @:click="chack">
                <el-icon class="icon1">
                    <Avatar/>
                </el-icon>
                {{ logined2 }}
            </span>
            <span> <img /></span>
            <span @:click="go('/userregister','?login=注册用户')">注册</span>

            <div className="denlu" v-show="flag">

               <div @:click="go('/userlogin','?login=普通用户')" :class="{choose1:true,choose2:mark}">
                    普通用户
                </div>
                <div @:click="go('/doctorlogin','?login=医生用户')" :class="{choose1:true,choose2:mark}">
                    医生用户
                </div>
                <div @:click="go('/adminlogin','?login=管理员')" :class="{choose1:true,choose2:mark}">管理员</div>

                <div @:click="fn2" :class="{choose1:true,choose2:!mark}">
                    退出登录
                </div>

            </div>
        </div>
    </div>
</template>

<script setup lang="ts">

import { useRouter } from 'vue-router';
import { ref, onMounted, watch, toRefs } from "vue"

import store from "../../../store/index"
let logined = toRefs(store()),
    logined2 = ref("请登录")

watch(logined.username, (x, y) => {
    chack()
})

let mark = ref(true)
function chack() {
    if (logined.username.value != "请登录") {
        mark.value = true
        logined2.value = logined.username.value
    } else {
        logined2.value = "请登录"
        mark.value = false
    }
  
}
function fn2() {
    store().chack("退出登录")
    chack()
}
onMounted(() => {
    chack()
})



let router = useRouter()

function go(x: string, y?: string): any {
    store().chack("请登录2")
    router.push(x + y )
  
}


// function go(x: string,y?:string): any {
//     router.push(x)
//     console.log("top_nav.vue go(x) ", x+y)

// }

let flag = ref(false)
function fn() {
    console.log("top_nav.vue fn() ,验证")

    if (true) {
        flag.value = true
        setTimeout(() => {
            flag.value = false
        }, 5000)
    }


}

</script>

<style scoped  lang="scss">
#Nav {
    width: 1180px;
    margin: 0 auto;
    display: flex;
    justify-content: flex-end;
    position: relative;

    span {
        display: inline-block;
        height: 16px;
        margin: auto 0;
        font-size: 16px;
        line-height: 16px;

        &:hover {
            color: #00c792;
            // text-decoration: underline;
        }
    }
}


.denlu {
    z-index: 500;
    position: absolute;
    margin-top: 50px;
    margin-right: 20px;
    background-color: white;

    .choose1 {
        background-color: #F2F3F5;
        width: 80px;
        text-align: center;
        padding: 5px 20px;
        margin-bottom: 1px;

        &:hover {
            color: #00c792;
            text-decoration: underline;
        }
    }

    .choose2 {
        display: none;
    }
}

.icon1 {
    position: absolute;
    top: 15px;
    right: 110px;
    font-size: 25px;
    text-align: center;
    line-height: 60px;
    margin: auto 0;

    &:hover {
        color: #00c792;
    }
}

img {
    display: inline-block;
    width: 0;
    height: 0;
    margin: 10px;
    line-height: 20px;
    border: 2px #99a0aa solid;
    border-radius: 2px;
}
</style>